<div class="layui-row">
    <form class="layui-form" action="">
        <table class="layui-table" style="margin-top: 50px; color: #000000; text-align: left">
            <thead>
            <tr>
                <th>指标</th>
                <th>基准值</th>
                <th>当前值</th>
                <th>拦截次数</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td style="font-size: 10px">当天呼叫次数 <br> (测试主叫 -> 测试被叫)</td>
                <td>
                    <label id="a1">...</label>
                </td>
                <td>
                    <label id="a2">...</label>
                </td>
                <td id="a3">
                    1
                </td>
            </tr>
            <tr>
                <td>当天外呼次数</td>
                <td><label>3</label></td>
                <td><label>4</label></td>
            </tr>
            <tr>
                <td>7天平均通话时长(s)</td>
                <td><label>30</label></td>
                <td><label>28</label></td>
            </tr>
            <tr>
                <td>7天平均接通率</td>
                <td><label>0.98</label></td>
                <td><label>1.00</label></td>
            </tr>
            <tr>
                <td>7天平均接听率</td>
                <td><label>0.4</label></td>
                <td><label>1.00</label></td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<div id="refresh_icon" style="display: none; text-align: center; font-weight: bolder; padding: 17px">
    <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
    自动刷新中...
</div>
<div id="resume_icon" style="text-align: center; font-weight: bolder; padding: 17px">
    <i class="layui-icon layui-icon-pause"></i>
    未开启自动刷新。
</div>
<div class="layui-row" style="text-align: center">
    <button class="layui-btn layui-btn-radius" id="start" style="background-color: #2D71DB; font-weight: lighter">
        <i class="layui-icon layui-icon-refresh-1"></i> 自动刷新
    </button>
    <button class="layui-btn layui-btn-primary layui-border-red layui-btn-radius" id="resume" style="font-weight: lighter">
        <i class="layui-icon layui-icon-pause"></i> 暂停刷新
    </button>
</div>
<script>
    layui.use(function () {
        let $ = layui.jquery;
        let interval;
        let getCallCount = function () {
            $.ajax({
                type: 'get',
                url: "http://<%= server_host %>/admin/getCallInfo?from=15700083072&to=18996478090",
                headers: {token: localStorage.getItem('token')},
                success: function (res) {
                    if (res.code === 200) {
                        $('#a2').html(res.data.callCount);
                        $('#a3').html(res.data.antiCount)
                    }
                },
            });
        }
        let stop_refresh = function () {
            window.clearInterval(interval)
            $('#refresh_icon').hide()
            $('#resume_icon').show()
        };

        getCallCount();

        let start_refresh = function () {
            window.clearInterval(interval)
            interval = window.setInterval(getCallCount, 1000)
            $('#refresh_icon').show()
            $('#resume_icon').hide()
        };

        start_refresh();

        $.ajax({
            type: 'get',
            url: "http://<%= server_host %>/model/getBaseModel",
            headers: {token: localStorage.getItem('token')},
            success: function (res) {
                if (res.code === 200) {
                    let std_anti_cnt = res.data.config['callFromSameNumToday']
                    $('#a1').html(std_anti_cnt);
                }
            },
        });
        $('#start').on("click", start_refresh)
        $('#resume').on("click", stop_refresh)
    });
</script>